<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>登录-AR视频</title>
		<meta name="description" content="resume" />
		<meta name="keywords" content="resume network front-end" />
		<link href="${pageContext.request.contextPath }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
		<link href="${pageContext.request.contextPath }/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/layout.css" />
		<script src="${pageContext.request.contextPath }/js/jquery.min.js?v=2.1.4"></script>
		<script src="${pageContext.request.contextPath }/js/bootstrap.min.js?v=3.3.6"></script>
		<script src="${pageContext.request.contextPath }/js/plugins/validate/jquery.validate.min.js"></script>
   	 	<script src="${pageContext.request.contextPath }/js/plugins/validate/messages_zh.min.js"></script>
		<!--[if lt IE 9]>
		<script src="js/html5.js"></script>
		<script src="js/css3-mediaqueries.js"></script>
		<![endif]-->
	<script type="text/javascript">
	 $().ready(function () {
			if (window!=top){// 判断当前的window对象是否是top对象
				top.location.href = window.location.href; // 如果不是，将top对象的网址自动导向被嵌入网页的网址  
			} 
	    });
	
	$().ready(function(){
		$("#p2").hide();
	});
	</script>
	<script>
		var _hmt = _hmt || [];
		(function() {
			var hm = document.createElement("script");
			hm.src = "https://hm.baidu.com/hm.js?935bfdf5fb7398f78c910992711cb288";
			var s = document.getElementsByTagName("script")[0];
			s.parentNode.insertBefore(hm, s);
		})();
	</script>
	</head>
	<body class="login">
		<!--标题-->
		<!--登录框-->
		<div class="mainLogin">
			<h3 class="loginTitle">AR视频广告管理系统</h3>
			<form class="form-horizontal" id="loginForm" role="form">
				<div class="form-group">
              		<input type="text" class="form-control" id="username" placeholder="输入用户名" name="username" maxlength="20" >
				</div>
				<div class="form-group">
					<input type="password" class="form-control" id="password" placeholder="输入密码" name="password" maxlength="20" >
				</div>
				<!--验证码 -->
				<div class="form-group" style="position: relative;">
					<input id="veryCode" name="veryCode" class="form-control" type="text" placeholder="输入验证码"  maxlength="4"/>
					<img id="imgObj" class="yzmBtn" alt="图片验证码" src="${pageContext.request.contextPath }/xuan/verifyCode" onclick="changeImg()"/> 
				</div>
				<div class="form-group">
					<div class="checkbox pull-left">
						<label>
							<input type="checkbox" name="rememberMe" id="rememberMe" value="yes">记住登录状态
						</label>
					</div>
<!-- 					<div class="pull-right"> -->
<%-- 						<a href="${pageContext.request.contextPath }/login/forgetPwd" class="forgetBtn">忘记密码？</a> --%>
<!-- 					</div> -->
				</div>
				<div class="clear"></div>
				<div class="form-group">
					<button type="submit" class="btn btn-primary w100">登录</button>
				</div>
			</form> 
		</div>
		<!--底部-->
		<div class="loginFooter">最终解释权归AR视频所有</div>
		<script src="${pageContext.request.contextPath }/js/myJs.js"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- md5加密 -->
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.md5.js"></script>
    
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jsbn.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/prng4.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/rng.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/rsa.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/base64.js"></script>
	<script src="${pageContext.request.contextPath }/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/layer/layer.min.js"></script>
		<script type="text/javascript">
	$().ready(function () {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#loginForm").validate({
            rules: {
            	username: {
                    required: true,
                    maxlength:20
                },
                password: {
                    required: true,
                    maxlength:20
                },
                veryCode: {
                    required: true,
					digits:true,
					rangelength:[4,4]
                }
            },
            messages: {
            	username:{
            		required:icon + "请输入用户名",
            		maxlength:icon + "用户名最大长度20"
            		},
            	password: {
            		required:icon + "请输入密码",
            		maxlength:icon + "密码最大长度20"
            		},
            	veryCode: {
            		required:icon + "请输入验证码",
					digits: icon + "请填写正确的验证码",
					rangelength: icon + "请填写正确的验证码"
            		}
                
            },
    		submitHandler: function(form) {
    			submitLogin();
    		}
        });
    });
	//登录
	function login(){
		var username=$("#username").val();
		var password=$("#password").val();
		$.post("${pageContext.request.contextPath }/login/publicKey",function(data){
			var rsaKey = new RSAKey();
			rsaKey.setPublic(b64tohex(data.modulus), b64tohex(data.exponent));
			var enPassword = hex2b64(rsaKey.encrypt(password));
			var enuserName = hex2b64(rsaKey.encrypt(username));
			var postData = { enuserName: enuserName, enPassword:enPassword};

    		$.post("${pageContext.request.contextPath }/login/login", postData, function(data){
    			if(data.code==1){ 
    				window.location.href = "${pageContext.request.contextPath }/admin/main"; 
    			}else{
    				alert(data.message);
    				clear();
    			}        			
    		}, "json");  
		});
	}
	
	
	function clear(){
		$("#username").val('');
		$("#password").val('');
		$("#veryCode").val('');
		changeImg();
	}
	

	//提交表单
	function submitLogin(){
		var code = $("#veryCode").val();
		$.ajax({
			type : "POST",
			url : "${pageContext.request.contextPath }/resultServlet/validateCode",
			data : {veryCode:code},
			success : function(data){
				if(data == '0'){//验证码正确
					login();
				}else if (data == '1'){//验证码为空
				    layer.alert("验证码为空"); 
				}else if (data == '2'){//验证码为空
				    layer.alert("验证码错误"); 
				}else{//验证码错误
				    layer.alert('登录次数过多，已被锁定'); 
				}
			}
		});
	}
	

	//图片
	function changeImg() {
		var imgSrc = $("#imgObj");
		var src = imgSrc.attr("src");
		imgSrc.attr("src", chgUrl(src));
	}
	//时间戳    
	//为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳    
	function chgUrl(url) {
		var timestamp = (new Date()).valueOf();
		urlurl = url.substring(0, 17);
		if ((url.indexOf("&") >= 0)) {
			urlurl = url + "×tamp=" + timestamp;
		} else {
			urlurl = url + "?timestamp=" + timestamp;
		}
		return urlurl;
	}
	</script>
	</body>
</html>